<template>
  <view class="filter-page">
    <view class="header">
      <text class="title">筛选</text>
      <button class="close-button" @click="goBack">
        <text class="close-icon">X</text>
      </button>
    </view>
    
    <scroll-view scroll-y class="filter-content">
      <!-- 性别筛选 -->
      <view class="filter-section">
        <text class="section-title">性别</text>
        <view class="option-group">
          <button 
            v-for="gender in ['男', '女']" 
            :key="gender" 
            :class="['option-button', { 'selected': filters.gender === gender }]"
            @click="setFilter('gender', gender)"
          >
            {{ gender }}
          </button>
        </view>
      </view>

      <!-- 教学年级筛选 -->
      <view class="filter-section">
        <text class="section-title">教学年级</text>
        <view class="option-group">
          <button 
            v-for="grade in ['小学', '初中', '高中', '大学']" 
            :key="grade" 
            :class="['option-button', { 'selected': filters.grade.includes(grade) }]"
            @click="toggleFilter('grade', grade)"
          >
            {{ grade }}
          </button>
        </view>
      </view>

      <!-- 教学科目筛选 -->
      <view class="filter-section">
        <text class="section-title">教学科目</text>
        <view class="option-group">
          <button 
            v-for="subject in ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治']" 
            :key="subject" 
            :class="['option-button', { 'selected': filters.subject.includes(subject) }]"
            @click="toggleFilter('subject', subject)"
          >
            {{ subject }}
          </button>
        </view>
      </view>

      <!-- 教师学历筛选 -->
      <view class="filter-section">
        <text class="section-title">教师学历</text>
        <view class="option-group">
          <button 
            v-for="education in ['本科', '硕士', '博士']" 
            :key="education" 
            :class="['option-button', { 'selected': filters.education.includes(education) }]"
            @click="toggleFilter('education', education)"
          >
            {{ education }}
          </button>
        </view>
      </view>

      <!-- 独特标签筛选 -->
      <view class="filter-section">
        <text class="section-title">独特标签</text>
        <view class="option-group">
          <button 
            v-for="tag in ['耐心', '幽默', '严厉', '有经验', '善于沟通', '擅长应试']" 
            :key="tag" 
            :class="['option-button', { 'selected': filters.tags.includes(tag) }]"
            @click="toggleFilter('tags', tag)"
          >
            {{ tag }}
          </button>
        </view>
      </view>
    </scroll-view>

    <view class="footer">
      <button class="reset-button" @click="resetFilters">重置</button>
      <button class="apply-button" @click="applyFilters">应用</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        gender: '',
        grade: [],
        subject: [],
        education: [],
        tags: []
      }
    }
  },
  methods: {
    setFilter(key, value) {
      this.filters[key] = this.filters[key] === value ? '' : value;
    },
    toggleFilter(key, value) {
      const index = this.filters[key].indexOf(value);
      if (index === -1) {
        this.filters[key].push(value);
      } else {
        this.filters[key].splice(index, 1);
      }
    },
    resetFilters() {
      this.filters = {
        gender: '',
        grade: [],
        subject: [],
        education: [],
        tags: []
      };
    },
    applyFilters() {
      // 这里可以添加将筛选结果传回上一页的逻辑
      uni.navigateBack();
    },
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style>
.filter-page {
  min-height: 100vh;
  background-color: #F3E8FF;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #8B5CF6;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

.close-button {
  background: none;
  border: none;
  padding: 10rpx;
}

.close-icon {
  color: #FFFFFF;
  font-size: 36rpx;
}

.filter-content {
  flex: 1;
  padding: 20rpx;
}

.filter-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #4B5563;
  margin-bottom: 16rpx;
}

.option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.option-button {
  background-color: #FFFFFF;
  border: 2rpx solid #8B5CF6;
  border-radius: 30rpx;
  padding: 12rpx 24rpx;
  font-size: 24rpx;
  color: #8B5CF6;
}

.option-button.selected {
  background-color: #8B5CF6;
  color: #FFFFFF;
}

.footer {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  border-top: 2rpx solid #E5E7EB;
}

.reset-button, .apply-button {
  width: 45%;
  padding: 16rpx 0;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.reset-button {
  background-color: #F3F4F6;
  color: #4B5563;
  border: 2rpx solid #E5E7EB;
}

.apply-button {
  background-color: #8B5CF6;
  color: #FFFFFF;
  border: none;
}
</style>